Mise en Cache pour Mobile

La fonctionnalité de cache mobile est utilisée pour servir des pages rapides aux visiteurs qui utilisent un appareil mobile pour naviguer sur votre site web.

Cette fonctionnalité est activée par défaut lors de l'activation de WP Rocket.

Cet article explique en détail le fonctionnement de cette fonction et donne d'autres instructions générales.

Vue d'ensemble

Avec la mise en cache mobile, WP Rocket applique la mise en cache des pages et toutes les optimisations nécessaires pour les appareils mobiles.

WP Rocket va créer un ensemble séparé de fichiers de cache pour les appareils mobiles. Avec cette approche, tout contenu spécifique au mobile sera mis en cache et servi indépendamment.

En outre, si l'option de Préchargement du cache est activée, les fichiers de cache spécifiques aux téléphones portables seront générés en plus des fichiers de cache spécifiques aux ordinateurs de bureau.

Comment vérifier si le cache mobile fonctionne

Si vous visitez le répertoire cache dans /wp-content/cache/wp-rocket/votredomaine.com/, vous devriez voir les fichiers de cache spécifiques aux appareils mobiles :

• index-mobile.html_gzip
• index-mobile-https.html_gzip

Important ! Vérifier l' article sur la compatibilité avec les hébergeurs pour voir si votre hébergeur utilise sa propre option de mise en cache des pages. Chez ces hébergeurs, le dossier de cache de WP Rocket sera vide.

Traiter les tablettes comme des appareils mobiles

Par défaut, la fonction de cache mobile ne fonctionne que sur les téléphones. Elle ne considère pas les tablettes comme "mobiles" dans le contexte de la mise en cache des pages. Par conséquent, le cache par défaut (pour les ordinateurs de bureau) sera utilisé pour les tablettes.

Vous pouvez modifier ce comportement par défaut pour traiter les tablettes comme des mobiles avec ce plugin d'aide :

📥 Télécharger (.zip): WP Rocket | Set tablets as mobile
Développeurs : vous pouvez trouver le code de ce plugin sur GitHub.

Cette assistance peut être utile si votre thème ou votre plugin utilise la fonction wp_is_mobile(), qui traite les tablettes comme des appareils mobiles.

Comment désactiver cette fonction ?

Si vous rencontrez des problèmes et que vous devez désactiver cette option, vous pouvez utiliser les extraits de code suivants.

Désactiver complètement la fonction Cache mobile

Utilisez ce filtre pour désactiver complètement la fonction de cache mobile :

add_filter( 'pre_get_rocket_option_cache_mobile', '__return_zero' );

Désactivation du cache spécifique au mobile uniquement

Et, si nécessaire, vous pouvez utiliser ce code pour désactiver le cache spécifique aux appareils mobiles et utiliser à la place le cache par défaut (de bureau) pour les appareils mobiles :

add_filter( 'pre_get_rocket_option_do_caching_mobile_files', '__return_zero' );

Vous pouvez ajouter les snippets à votre site comme montré ici. 

Risques liés à la désactivation du cache spécifique au mobile

Néanmoins, la désactivation du cache spécifique au mobile peut potentiellement causer des problèmes si votre site contient du contenu spécifique au mobile.

Les problèmes suivants peuvent survenir dans les options de WP Rocket :

• Utilisation de Supprimer les ressources CSS inutilisées avec Créer un fichier de cache à part pour les mobiles
• Optimiser les images essentielles : Conflits connus

De même, toute fonction personnalisée ou tierce dépendant de la fonction  wp_is_mobile() pourrait être affectée.

Comment l'activer si c'est désactivé ?

If you have used the filters to deactivate the Mobile Cache options, you can enable the options back again by removing the snippets from your site.

Si vous avez utilisé les filtres pour désactiver les options de cache mobile, vous pouvez réactiver les options en supprimant les extraits de votre site.

And, in case you updated to WP Rocket 3.16 from a previous version, while the  Mobile Cache option was deactivated, you can go to the Tools tab, and click on the Mobile Cache > Enable Mobile Cache option, as shown here:

Et, dans le cas où vous avez mis à jour WP Rocket 3.16 à partir d'une version précédente, alors que l'option Cache Mobile était désactivée, vous pouvez aller dans l'onglet Outils, et cliquer sur l'option Cache Mobile > Activer le Cache Mobile, comme montré ici :

Il s'agit d'une action unique. Une fois que vous aurez cliqué sur le bouton Activer le cache mobile, la section Cache mobile disparaîtra de l'onglet Outils.

Veuillez noter que lorsque vous utilisez l'option de l'onglet Outils pour activer l'option Cache mobile, son comportement par défaut de création d'un cache spécifique au mobile sera également activé.

Niveau de cache supplémentaires

Si vous utilisez une couche supplémentaire de cache, comme Varnish, NGINX, Cache Everything de Cloudflare, etc., qui n'est pas configurée pour faire la distinction entre les visiteurs mobiles et les visiteurs de bureau, vous risquez de rencontrer ces problèmes :

• Mauvais affichage sur Mobile, Tablette ou sur Bureau
• Utilisation de Supprimer les ressources CSS inutilisées avec Créer un fichier de cache à part pour les mobiles
• Optimiser les images essentielles : Conflits connus

Pour éviter ce type de problème, il est recommandé de désactiver ces couches supplémentaires de cache, et de laisser WP Rocket s'occuper de la mise en cache pour le bureau et le mobile.

Hébergeurs gérant la mise en cache des pages

Certains hébergeurs avec compatibilité automatique gèrent eux-mêmes la mise en cache des pages au lieu d'utiliser la mise en cache de WP Rocket

Parmi les hébergeurs compatibles, WP Engine et Kinsta sont connus pour être configurés de manière à avoir un cache séparé pour les mobiles, ce qui fait que les problèmes de mise en page liés à des couches ou des caches supplémentaires ne devraient pas se produire.

Cependant, ce n'est pas le cas pour tous les fournisseurs d'hébergement. Donc, dans le cas où vous avez des problèmes avec des hébergeurs qui gèrent la mise en cache des pages (au lieu de WP Rocket), vous devriez contacter leur équipe de support, demander si leur mise en cache des pages est configurée pour séparer les types d'appareils, et demander des conseils supplémentaires.

Cloudflare APO

Si vous utilisez Cloudflare APO, veillez à activer l'option de mise en cache par type d'appareil.

Pour plus d'informations sur la compatibilité entre WP Rocket et Cloudflare APO, veuillez consulter ce guide.

Détails techniques

• Les téléphones mobiles sont détectés par l'agent utilisateur HTTP. Vous pouvez trouver l'ensemble des agents utilisateurs que WP Rocket détectera et traitera comme mobiles dans ce fichier.

WP Rocket antérieur à 3.16

Considérer les tablettes comme "mobile"

À partir de WP Rocket 3.2, vous pouvez modifier ce comportement par défaut pour traiter les tablettes comme des mobiles avec ce plugincomplémentaire :

📥 Télécharger (.zip): WP Rocket | Set Tablets As Mobile
Développeurs : vous touverez le code de ce plugin sur GitHub.

Ce plugin peut être utile si votre thème ou un plugin utilise la fonction wp_is_mobile, qui traite les tablettes comme des appareils mobiles. 
Notez également que les sous-options  Activer la mise en cache pour les appareils mobiles et Créer un fichier de cache à part pour les mobiles doivent être activées pour que ce petit plugin fonctionne. Plus d'informations sur ces options ci-dessous.

Devrais-je activer la mise en cache pour les appareils mobiles ?

Oui, en règle générale, vous devez activer la mise en cache pour les smartphones.

N'activez pas la mise en cache mobile si votre site web n'est pas responsive, c'est-à-dire qu'il ne s'adapte pas automatiquement aux écrans plus petits.

Note : Si l'option de mise en cache pour mobile n'est pas activée, WP Rocket ne servira aucune donnée mise en cache aux mobiles. Les visiteurs qui consulteront votre site web via leur smartphone recevront les pages (plus lentement) directement depuis la base de donnée WordPress.

Que signifie “Créer un fichier de cache à part pour les mobiles” ?

Quand cette option est activée, WP Rocket créera un fichier de cache dédié aux mobiles pour chaque document à mettre en cache. En conséquence, WP Rocket servira un fichier de cache entièrement différent pour les smartphones, pour les tablettes ou pour les ordinateurs de bureau.

Cela peut être utile, voire nécessaire au cas où votre site fournirait uniquement des fonctionnalités pour les appareils mobiles, comme une barre d'outils de navigation supplémentaire, chargée via JavaScript. Si WP Rocket ne créait pas de fichier dédié à cette version, ces fonctionnalités mobiles pourraient être mises en cache et être visibles sur les ordinateurs de bureau, ou inversement : la version de bureau serait mise en cache et servie aux mobiles. Les fonctionnalités mobiles seraient alors invisibles.

Si vous utilisez l'une des extensions suivantes, l'option sera activée par défaut (et la coche sera grisée) :

• WP Touch (Free Version)
• WP Mobile Detect
• wiziApp
• WordPress Mobile Pack
• WP-Mobilizer
• WP Mobile Edition
• Device Theme Switcher
• Easy Social Share Buttons for WordPress
• Jetpack, quand le thème mobile est activaté
• JetMenu
• wpDiscuz

Note : Les fichiers de cache dédiés aux mobiles ont été introduits dans WP Rocket 2.7. Si vous utilisez une version précédente et l'un des plugins mentionnés ci-dessus, vous ne devez pas activer la mise en cache mobile.

🛠   Si vous rendez une petite visite au dossier de cache wp-content/cache/wp-rocket/[exemple.com] (avec exemple.com représentant votre nom de domaine), vous verrez 2 fichiers nommés chacun d'entre eux :

• index.html(.gz) —fichier de cache pour les tablettes et ordinateurs 
• index-mobile.html(.gz) —fichier de cache pour les téléphones
  

Important si vous utilisez Cloudflare APO : 
Lorsque vous utilisez Cloudflare APO en même temps que l'option " Créer un fichier de cache à part pour les mobiles ", assurez-vous d'activer la mise en cache par type d'appareil de Cloudflare APO. Voici où vous pouvez le trouver :
- Le paramètre de la carte APO du tableau de bord Cloudflare.
- Ou à partir du plugin WordPress version 4.4.0 ou ultérieure.
Cela forcera Cloudflare APO à mettre en cache et à servir la bonne version de la page.

Devrais-je activer les deux options en même temps ?

Ce sera en fonction de la personnalisation que vous avez apportée à la version responsive de votre site, vous pouvez soit activer la première option, ou les deux options au cas où votre site fournit des fonctionnalités uniquement présentes sur les mobiles.

Voici une bonne règle de base sur la façon d'utiliser ces 2 options :

1

Avez-vous un autre niveau de mise en cache, comme Varnish, NGINX, etc.? Si c'est le cas, vous pouvez activer l'option "Activer la mise en cache pour les appareils mobile" en toute sécurité. En revanche, l'option "Créer un fichier de cache à part pour les mobiles" peut ne pas fonctionner proprement. Vous devez d'abord vérifier si le niveau de mise en cache supplémentaire peut faire la distinction entre les visiteurs mobiles et les visiteurs d'ordinateurs de bureau (demandez à votre hôte). Si ce n'est pas possible, utilisez uniquement l'option "Activer la mise en cache pour les appareils mobile". Si c'est possible, procédez comme suit.

2

Activez la première option ( Activer la mise en cache pour les appareils mobiles) seule si votre design est entièrement responsive et scroll de haut en bas sans problème.

🛠   WP Rocket servira le même fichier de cache pour une demande de page qu'une tablette ou un ordinateur de bureau recevrait.

3

En plus, activez la deuxième option ( Créer un fichier de cache à part pour les mobiles) au cas où vous utilisez l'un des plugins mentionnés ci-dessus - ou dans la description de l'option - ou si votre site charge des ressources spécifiques sur les appareils mobiles.

🛠   WP Rocket servira un fichier de cache séparé aux téléphones, différent de celui que les tablettes et les ordinateurs de bureau recevraient.

Vous ne savez pas quoi faire ? 😰  
En cas de doute, activez toujours les deux options. Cela peut se traduire par deux fois plus de fichiers cache sur votre serveur, mais il sera dans tous les cas en mesure de répondre à vos besoins, peu importe la façon dont votre site est responsive.

Le cache mobile peut-il être préchargé ?

Oui, si vous avez activé l'option  Créer un fichier de cache à part pour les mobiles, les fichiers de cache des appareils mobiles seront également générés par le Préchargement en plus des fichiers de cache bureau.

Cache séparé pour les appareils mobiles et autre niveau de cache

Lorsque d'autres couches de mise en cache sont activées (cache serveur, cache DNS), elles doivent être en mesure de servir un cache distinct pour les ordinateurs de bureau et les téléphones portables afin que la fonctionnalité fonctionne.

Cloudflare Cache Everything

Lors de l'utilisation de la règle de page Cloudflare Cache Everything, Cloudflare met en cache la version de l'appareil qui arrive en premier et la sert à toutes les visites suivantes.

Il doit être désactivé s'il est obligatoire d'avoir une version de cache différente pour les mobiles et les ordinateurs de bureau.

Cloudflare APO

Si vous utilisez Cloudflare APO en même temps que l'option "Cache séparé pour les appareils mobiles", assurez-vous d'activer l'option "Cache séparé pour les appareils mobiles" de Cloudflare APO. caching by device type. Voici où la trouver :
- Le réglage APO du tableau de bord Cloudflare
- ou à partir du plugin WordPress version 4.4.0 ou ultérieure
Cela forcera Cloudflare APO à mettre en cache et à servir la bonne version de la page.

Varnish

Par défaut, Varnish stocke et sert le même cache pour les ordinateurs de bureau et les téléphones portables.

Une configuration supplémentaire est nécessaire pour aider Varnish à distinguer les différents types de cache.

The following additional customization for the default.vcl is a good starting point.